<template>
	<view class="page-vip-card">
		<MxVipCardDetail class="cmp-vip-card-detail" :info="membercard" :image="cardImg" />
		<MxBuyButton class="cmp-buy-button" :total="total" @buy="onBuy" />
	</view>
</template>

<script>
	
	import Config     from '@/utils/config.js'
	import MxVipCardDetail from '@/components/common/MxVipCardDetail.vue';
	import MxBuyButton from '@/components/common/MxBuyButton.vue';
	import * as membercardApi from '@/api/membercard.js'
	import { wxPayment } from '@/utils/app'
	
	export default {
		components: {
			MxVipCardDetail,
			MxBuyButton,
		},
		data() {
			return {
				membercard:{},
				total: 0,
				cardImg: ''
			};
		},
			
		onLoad(option) { 
			membercardApi.detail({
				cardId: option.nid
			}).then(res => {
				this.membercard = res.data
				this.total = Number(res.data.price)
				this.cardImg = res.data.image.file_path
			})
		},
		
		methods: {
			onBuy(total) {
				console.log(total, this.membercard)
				
				membercardApi.buy({cardId: this.membercard.nid}).then(res => {
					wxPayment(res.data)
					  .then(() => {
						  this.$success('购买成功')
						  // TODO: 购买成功跳到我的会员卡页面
					  })
					  .catch(err => this.$error('支付取消'))
					  .finally(() => {
					    
					  })
				})
			}
		}
		
	}
</script>

<style lang="scss" scoped>
.page-vip-card{
	.cmp-vip-card-detail{
		margin: 0 auto;
	}
	
	.cmp-buy-button{
		margin: 0 auto;
		margin-top: 100rpx;
		margin-bottom: 100rpx;
	}
}
</style>
